<template>
  <el-dialog :visible.sync="loginDialogVisible" size="middle" class="login-dialog">
    <el-tabs v-model="activeName" type="card">

      <el-tab-pane label="登录" name="login">
        <el-form :model="loginForm" :rules="rules1" label-width="80px" ref="loginForm" label-position="left" class="demo-ruleForm login-container">
          <div>
            <!--<h3 class="title">系统登录</h3>-->
            <el-form-item prop="account" label="账号">
              <el-input type="text" v-model="loginForm.account" auto-complete="off" placeholder="账号"></el-input>
            </el-form-item>
            <el-form-item prop="checkPass" label="密码">
              <el-input type="password" v-model="loginForm.checkPass" auto-complete="off" placeholder="密码"></el-input>
            </el-form-item>
            <el-checkbox v-model="check1" checked class="remember">记住密码</el-checkbox>
            <!--<el-form-item style="width:100%;">-->
            <el-button type="primary" style="width:80%;;margin:0 auto;display: block;color:#fff;" @click.native.prevent="handleSubmit2"
              :loading="logining">登录</el-button>
            <!--<el-button @click.native.prevent="handleReset2">重置</el-button>-->
            <!--</el-form-item>-->
          </div>

        </el-form>
      </el-tab-pane>
      <el-tab-pane label="注册" name="regist">
        <el-form :model="registForm" label-width="80px" :rules="rules2" ref="registForm" label-position="left" class="demo-ruleForm login-container">
          <div>
            <!--<h3 class="title">系统注册</h3>-->
            <el-form-item prop="account" label="账号">
              <el-input type="text" v-model="registForm.account" auto-complete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item prop="email" label="邮箱">
              <el-input type="email" v-model="registForm.email" auto-complete="off" placeholder="请输入常用邮箱"></el-input>
            </el-form-item>
            <el-form-item prop="phone" label="手机号">
              <el-input type="text" v-model="registForm.phone" auto-complete="off" placeholder="请输入绑定手机号"></el-input>
            </el-form-item>
            <el-form-item prop="code" label="验证码">
              <el-input type="text" v-model="registForm.code" ref="code" auto-complete="off" placeholder="请输入验证码" style="width: 40%;margin-right: 10px;"></el-input>
              <el-button type="primary" :class="codeCd!=60?'disable':''" @click="getMobCode" :loading="codeLoading" style="width:112px;color:#fff;">{{codeCd!=60?(codeCd+'s'):'获取验证码'}}</el-button>
            </el-form-item>
            <el-form-item prop="pwd1" label="密码">
              <el-input type="password" v-model="registForm.pwd1" auto-complete="off" placeholder="请输入6-20位密码"></el-input>
            </el-form-item>
            <el-form-item prop="pwd2" label="密码">
              <el-input type="password" v-model="registForm.pwd2" auto-complete="off" placeholder="请再次输入密码"></el-input>
            </el-form-item>
            <el-checkbox v-model="check2" class="remember">同意注册协议</el-checkbox>
            <!--<el-form-item style="width:100%;">-->
            <el-button type="primary" style="width:80%;margin:0 auto;display: block;color:#fff;" @click.native.prevent="doReg" :loading="registLoading">注册</el-button>
            <!--</el-form-item>-->
          </div>

        </el-form>
      </el-tab-pane>
    </el-tabs>

  </el-dialog>

</template>

<script>
  import api from '../../api'
  //import NProgress from 'nprogress'
  import {
    taskAndTag
  } from "../../common/mixin";
  import {
    mixinPc
  } from "../../common/mixinPc";
  import {
    mapState,
    mapActions
  } from 'vuex'
  export default {
    data() {
      return {
        loginDialogVisible: false,
        activeName: 'login',
        logining: false,
        registLoading: false,
        codeLoading: false,
        loginForm: {
          account: '',
          checkPass: ''
        },
        rules1: {
          account: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          checkPass: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }]
        },
        registForm: {
          account: '',
          email: '',
          phone: '',
          code: '',
          pwd1: '',
          pwd2: ''
        },
        rules2: {
          account: [{
            required: true,
            message: '请输入账号',
            trigger: 'blur'
          }],
          email: [{
            required: true,
            message: '请输入邮箱号',
            trigger: 'blur'
          }],
          phone: [{
            required: true,
            message: '请输入手机号',
            trigger: 'blur'
          }],
          code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
          }],
          pwd1: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
          }],
          pwd2: [{
            required: true,
            message: '请再次输入密码',
            trigger: 'blur'
          }]

        },
        codeTimer: '',
        codeCd: 60,
        check1: true,
        check2: true
      };
    },
    computed: {
      ...mapState({
        uid: state => state.vux.uid,
        isLogin: state => state.vux.isLogin,
        sid: state => state.vux.sid, //websocket id
        wsLogin: state => state.vux.wsLogin,

      })
    },
    mixins: [taskAndTag, mixinPc],
    methods: {
      handleReset2() {
        this.$refs.loginForm.resetFields();
      },
      handleSubmit2(ev) {
        var _this = this;
        this.$refs.loginForm.validate((valid) => {
          if (valid) {
            this.logining = true;
            var loginParams = {
              username: this.loginForm.account,
              password: this.loginForm.checkPass
            };
            api.login(loginParams).then(data => {
              this.logining = false;
              if (data && data.errno == 0) {
                localStorage.removeItem('tagTmpSortArr')
                data = data.data;
                localStorage.setItem('timeUserInfo', JSON.stringify(data))
                _this.$store.commit(Object.assign({
                  type: "user"
                }, data));
                _this.$store.commit({
                  type: 'uid',
                  uid: data.uid
                });
                _this.$store.commit({
                  type: 'wsLogin',
                  wsLogin: true
                });
                _this.usertask(data.uid);
                _this.loginDialogVisible = false;

                //记住密码
                if (this.check1) {
                  localStorage.setItem('rememberUserInfo', JSON.stringify({
                    account: this.loginForm.account,
                    pwd: this.loginForm.checkPass
                  }))
                } else {
                  this.loginForm.account = ''
                  this.loginForm.checkPass = ''
                  localStorage.removeItem('rememberUserInfo')
                }
              } else {
                _this.$message({
                  message: data.errmsg,
                  type: 'error'
                });
              }
            });
          }
        });
      },
      getMobCode() {
        let _this = this;
        if (this.codeCd != 60) {
          return;
        }

        var phoneReg = /^1[0-9][0-9]\d{4,8}$/
        if (!phoneReg.test(this.registForm.phone)) {
          _this.$message({
            message: "手机号错误",
            type: 'warning'
          });
          return;
        }
        this.codeLoading = true;
        api.mobCode({
          mobile: this.registForm.phone,
          type: 1
        }).then(data => {
          _this.codeLoading = false;
          if (data && data.errno == 0) {
            _this.$message({
              message: data.msg || data.errmsg,
              type: 'warning'
            });
          }
          //this.$vux.toast.show({text: "获取成功",type: 'success',time: 1500})
          this.smsCodeCD = '60';
          if (this.codeTimer) {
            clearInterval(this.codeTimer)
          }
          this.codeTimer = setInterval(function () {
            _this.codeCd--;
            if (_this.codeCd == 0) {
              _this.codeCd = 60
              clearInterval(_this.codeTimer)
            }
          }, 1000)
        }).catch(result => {
          this.codeLoading = false;
          this.$message({
            message: '请勿重复获取验证码',
            type: 'warning'
          });
        });
      },
      doReg() {
        this.$refs.registForm.validate((valid) => {
          if (valid) {
            let _this = this;
            if (this.registForm.pwd1 != this.registForm.pwd2) {
              _this.$message({
                message: '两次密码不一致',
                type: 'warning'
              });
              return;
            }
            if (!this.check2) {
              _this.$message({
                message: '请勾选同意注册协议',
                type: 'warning'
              });
              return;
            }
            this.registLoading = true;
            api.reg({
              // 二次验证所需的三个值
              username: this.registForm.account,
              email: this.registForm.email,
              mobile: this.registForm.phone,
              verifycode: this.registForm.code,
              password: this.registForm.pwd1,
              password2: this.registForm.pwd2,
              //							openid: this.openid,
              clause: "on",
              custom: 1,
              type: 1,
            }).then(data => {
              this.registLoading = false
              if (data.errno != 0) {
                return _this.$message({
                  message: data.errmsg,
                  type: 'error'
                })
              };
              _this.activeName = 'login';
              data = data.data;
              _this.$message({
                message: '注册成功',
                type: 'success'
              })
              //注册完登录
              this.loginForm.account = this.registForm.account;
              this.loginForm.checkPass = this.registForm.password;
              this.handleSubmit2();
              this.$refs.registForm.resetFields()
            })
          }
        })

      },
    },
    mounted() {
      if (!localStorage.getItem('timeUserInfo')) {
        this.loginDialogVisible = true;
      }
      var rememberInfo = JSON.parse(localStorage.getItem('rememberUserInfo'))
      if (rememberInfo) {
        this.loginForm.account = rememberInfo.account;
        this.loginForm.checkPass = rememberInfo.pwd;
      }
    }
  }
</script>

<style>
  .login-dialog .el-dialog__header {
    display: none;
  }

  .login-dialog .el-tabs__nav {
    width: 100%;
    text-align: center;
  }

  .login-dialog .el-tabs__header {
    margin: 0;
  }

  .login-dialog .el-tabs--card>.el-tabs__header .el-tabs__item.is-active {
    width: 50%;
  }

  .login-dialog .el-tabs--card>.el-tabs__header .el-tabs__item {
    transition: none;
  }

  .login-container {
    /*box-shadow: 0 0px 8px 0 rgba(0, 0, 0, 0.06), 0 1px 0px 0 rgba(0, 0, 0, 0.02);*/
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 0 auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    box-sizing: content-box;
    border-top: 0;
  }

  .login-container .title {
    margin: 0px auto 35px auto;
    text-align: center;
    color: #505458;
    font-size: 20px;
  }

  .login-container .el-form-item {
    margin-bottom: 10px;
  }

  .login-container .remember {
    margin: 0px 0px 25px 0px !important;
  }

  .login-container .el-form-item__error {
    padding-top: 0;
    margin-top: -5px;
  }

  .el-button.disable {
    background: #aaa;
    border: 1px solid #aaa;
  }
</style>